// 引入css
require("../css/play.less")

//!判断是否登录 没有就拦截 返回登录页面
window.$check.checkLogin();
const BASE_URL = 'http://139.9.177.51:8099' // 接口请求的 URL

// 入口函数
document.ready(function () {
    const mask = document.querySelector("#mask");
    const pausedBtn = document.querySelector("#paused");
    const playBtn = document.querySelector("#play");
    const closeBtn = document.querySelector("#close");

    // 从存储总获取数据
    const videos = JSON.parse(window.localStorage.getItem("videos"));
    const videoBox = document.querySelector(".video-box video");
    const prevBtn = document.querySelector("#prev");
    const nextBtn = document.querySelector("#next");
    const courseTitle = document.querySelector(".course-title");

    const now = document.querySelector(".now");
    const all = document.querySelector(".all");

    const progressBar = document.querySelector("#progress_bar");

    let user = JSON.parse(localStorage.getItem("user")).userId;
    let id = window.localStorage.getItem("id");


    let index = 0;
    console.log(videos);

    function playVideo(i) {
        setTimeout(function () {
            videoBox.src = BASE_URL + videos[i].videoUrl;
            videoBox.play();
            now.innerHTML = i + 1; //显示当前是第几节
            all.innerHTML = videos.length; //显示总共的节数
            courseTitle.innerHTML = videos[i].title; //显示当前的标题
        }, 100)
    }


    let timerId = null;
    let arr = []
    let sum = 0;

    function progress() {
        timerId = setInterval(function () {
            arr[index] = videoBox.currentTime;
            let pe = videoBox.currentTime / videoBox.duration * 100;
            progressBar.style.width = pe + "%";
            // console.log(1);
        }, 26)
        // duration  currentTime
    }

    playVideo(index)


    // 点击显示蒙层 视频暂停
    pausedBtn.addEventListener("click", function () {
        mask.style = "visibility: visible;"
        videoBox.pause();
    })

    // 点击关闭蒙层 视频继续
    playBtn.addEventListener("click", function () {
        mask.style = "visibility: hidden;"
        videoBox.play();
    })
    // 点击关闭蒙层 返回课程列表
    closeBtn.addEventListener("click", function () {
        mask.style = "visibility: hidden;"
        arr.forEach(function (v) {
            sum += v
        })
        window.$http.post("/sports/saveTrain", {
            id: id,
            userId: user,
            takeTime: sum,
            calorie: sum * 1.3
        }, function (res) {
            if (res.status === 0) {
                window.$check.toast(res.status, "保存成功");
                setTimeout(function () {
                    window.location.href = "sports.html";
                }, 1500)
            }
        })
    })

    // 监听视频 结束自动播放下一个
    videoBox.addEventListener("ended", function () {
        nextBtn.click();
        clearInterval(timerId)
        // console.log(2);
    })
    // 视频播放开始调用 显示进度条
    videoBox.addEventListener("play", function () {
        clearInterval(timerId)
        progress()
    })
    // 视频播放开始调用 显示进度条
    videoBox.addEventListener("pause", function () {
        clearInterval(timerId)
    })
    // 点击切换前一个视频
    prevBtn.addEventListener("click", function () {
        index--;
        if (index < 0) {
            index = 0;
            return
        }
        playVideo(index)
    })

    // 点击切换后一个视频
    nextBtn.addEventListener("click", function () {
        index++;
        if (index >= videos.length) {
            index = videos.length - 1;
            // index = 0;
            return
        }
        playVideo(index);
    })
})
